<template>
  <view class="container">
    <!-- 左侧品牌 -->
    <scroll-view
      class="scroll-container"
      scroll-y="true"
      :scroll-into-view="toView"
      @scroll="scrollLeft"
      scroll-with-animation="true"
    >
      <view
        class="brand-item"
        style="border-bottom: none"
        @click="brands_click_item()"
      >
        <view class="contact-container">
          <view class="image-view">
          	<image src="../../../../static/allCar.png" mode="heightFix" />
          </view>
          <view class="name-text">{{ allBrand.name }}</view>
        </view>
        <view class="num">
          {{ allBrand.num }}
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view
        v-for="(keyItem, index1) in brandDataLists"
        :key="index1"
        :id="keyItem.key"
      >
        <view class="commonScroll">{{ keyItem.key }}</view>
        <view
          v-for="(brandItem, index2) in keyItem.value"
          :key="index2"
          class="brand-item"
          @click="brands_click_item(brandItem)"
        >
          <view class="contact-container">
			<view class="image-view">
				<image
				  :src="brandItem.cover_url"
				  mode="heightFix"
				/>
			</view>
            <view class="name-text">{{ brandItem.name }}</view>
          </view>
          <view class="num">
            {{ brandItem.num }}
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 右侧字母导航条 -->
    <view class="letter-nav">
      <view
        :class="temp == index ? 'right-view-text-select' : 'right-view-text'"
        v-for="(item, index) in brandDataLists"
        :key="index"
        @click="toSelectIndex(item.key, index)"
      >
        {{ item.key }}
      </view>
    </view>
    <!-- 选择车型 -->
    <uni-popup ref="modelPop" type="right">
      <view class="car-model">
        <view
          class="series-list"
          v-for="(item, index) in seriesList"
          :key="index"
        >
          <view class="s-name">{{ item.name }}</view>
          <view class="s-list">
            <view
              @click="seriesClick(item, childItem)"
              class="list-item"
              v-for="(childItem, childIndex) in item.children"
              :key="childIndex"
            >
              <view class="series-left">{{ childItem.name }}</view>
              <view class="series-right">
                <text>{{ childItem.num }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  newsCarsSearchBrand,
  newsCarsSearchSeries,
} from "@/api/newCarSerach.js";
export default {
  data() {
    return {
      temp: 0,
      toView: "",
      brandDataLists: [],
      brand_type: "search",
      topList: [],
      status: "3",
      allBrand: {},
      seriesList: [],
    };
  },

  onLoad(option) {
    newsCarsSearchBrand().then((res) => {
      this.brandDataLists = res.data.data;
      this.allBrand = res.data.all;
    });
  },
  onReady() {
    setTimeout(() => {
      this.getNodesInfo();
    }, 2000);
  },
  methods: {
    getNodesInfo() {
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll(".commonScroll")
        .boundingClientRect()
        .exec((data) => {
          let res = data[0];
          let rel = [];
          res.map((item) => {
            rel.push(item.top);
          });
          this.topList = rel;
        });
    },
    scrollLeft(e) {
      let scrollTop = e.target.scrollTop;
      for (let i = 0; i < this.topList.length; i++) {
        let h1 = this.topList[i];
        let h2 = this.topList[i + 1];
        if (scrollTop >= h1 && scrollTop < h2) {
          this.temp = i;
        }
      }
    },
    toSelectIndex(item, index) {
      this.toView = item;
      this.temp = index;
    },
    brands_click_item(item) {
      if (item) {
        newsCarsSearchSeries(item.id).then((res) => {
          this.seriesList = res.data.data;
        });
        this.$refs.modelPop.open();
      } else {
        this.back_page({
          name: "全部车型",
          id: "",
        });
      }
    },
    seriesClick(item, childItem) {
      this.back_page(childItem);
    },
    back_page(item) {
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      prevPage.$vm.searchCarBackData(item);
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f7f8fa;
}
.scroll-view-class {
  white-space: nowrap;
  background-color: white;
  height: auto;
}

.scroll-view-class-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
}

.content-item-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scroll-container {
  height: 100vh;
}

.letter-nav {
  display: flex;
  position: fixed;
  right: 14rpx;
  top: 0;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .right-view-text {
    font-size: 26rpx;
    font-family: DIN Alternate;
    font-weight: bold;
    color: #9b9b9b;
    margin: 10rpx 0;
  }

  .right-view-text-select {
    color: #0e59ea;
    font-weight: bold;
    margin: 10rpx 0;
  }
}

.common-image-brand-view-class {
  width: auto;
  height: 50rpx;
  background: #ffffff;
  opacity: 1;
  border-radius: 22rpx;
  margin: 5rpx;
}

.common-text-brand-key {
  font-size: 32rpx;
  font-family: DIN Alternate;
  font-weight: bold;
  color: #1c2125;
  opacity: 1;
  padding: 8rpx 0px 6rpx 28rpx;
  background-color: #f4f4f4;
}

.commonScroll {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding: 13rpx 29rpx;
}
.brand-item {
  padding: 30rpx 29rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  display: flex;
  align-items: center;
  &:last-child {
    border-bottom: none;
  }
  .contact-container {
    display: flex;
    align-items: center;
    flex: 1;
    .image-view {
	  width: 110rpx;
      height: 54rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  image{
		  height: 54rpx;
	  }
    }
    .name-text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      margin-left: 35rpx;
    }
  }
  .num {
    color: #999;
    uni-icons {
      margin-left: 15rpx;
    }
  }
}

.common-box-brand-view-class {
  height: auto;
  width: auto;
  text-align: center;
  margin: 20rpx 0rpx 20rpx 30rpx;
}
.car-model {
  width: 550rpx;
  height: 100%;
  background-color: #f7f8fa;
}
.series-list {
  .s-name {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 12rpx 25rpx;
  }
  .s-list {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 30rpx 25rpx;
      border-bottom: 1rpx solid #e6e6e6;
      &:last-child {
        border-bottom: none;
      }
      .series-left {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }
      .series-right {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        image {
          width: 14rpx;
          height: 16rpx;
          margin-left: 15rpx;
        }
      }
    }
  }
}
</style>